<template>
  <div class="right-box" :class="{ 'hidden-icon': ishidden }">
    <div class="fold-icon" @click="closeRightBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': ishidden }" />
      </el-icon>
    </div>
    <div class="right-heard">
      <div class="right-heard-title" v-if="defaultselect.btnName == '新建区域'">
        区域方案-
        <span class="heard-title-color">{{ defaultselect.calczName }}</span>
      </div>
      <div class="right-heard-title" v-else-if="defaultselect.btnName == '新建河系'">
        河系方案-
        <span class="heard-title-color">{{ defaultselect.rsysName }}</span>
      </div>
      <div class="right-heard-title" v-else-if="defaultselect.btnName == '新建流域'">
        流域方案-
        <span class="heard-title-color">{{ defaultselect.basinName }}</span>
      </div>
    </div>
    <div class="right-main">
      <AreaMethods
        v-if="defaultselect.btnName == '新建区域'"
        :zId="defaultselect.id"
        :zoneId="defaultselect.zoneId"
      />
      <RiverMethods
        v-if="defaultselect.btnName == '新建河系'"
        :zId="defaultselect.id"
        :zoneId="defaultselect.zoneId"
      />
      <BasinMethods
        v-if="defaultselect.btnName == '新建流域'"
        :zId="defaultselect.id"
        :zoneId="defaultselect.zoneId"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect } from 'vue'
import emitter from '@/utils/bus'
//区域方案
import AreaMethods from './cpns/areaMethods/index.vue'
//河系方案
import RiverMethods from './cpns/riverMethods/index.vue'
// 流域方案
import BasinMethods from './cpns/basinMethods/index.vue'
import sec_info from '@/assets/data/com_data/sec_info.json'
// 页面加载时候右侧弹框默认关闭
const ishidden = ref(true)

const state = reactive({
  sectionArr: []
})

const closeRightBox = () => {
  ishidden.value = !ishidden.value
  emitter.emit('changeRightBox', true)
}
const changeBtn = (value) => {
  showBtn.value = value
}
defineExpose({ changeBtn })
const props = defineProps({
  defaultselect: {
    type: Object,
    default: () => ({})
  },
  isShow: {
    type: Boolean,
    default: true
  },
  showAddBtn: {
    type: Boolean,
    default: false
  }
})
watchEffect(() => {
  ishidden.value = props.isShow
})
onMounted(() => {
  state.sectionArr = sec_info.map((item) => ({
    title: item.blknm,
    id: item.blkcd
  }))
})
</script>

<style lang="less" scoped>
.right-box {
  position: absolute;
  z-index: 101;
  right: 0;
  top: 0;
  height: 100%;
  width: 1130px;

  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--fold-border-color);
  border-radius: 4px;
  background-color: var(--fold-bg-color);
  transition: right 1s;
  &.hidden-icon {
    right: -1130px;
    transition: right 1s;
  }
  .fold-icon {
    width: 20px;
    height: 120px;
    line-height: 120px;
    position: absolute;
    background: #eee;
    top: 50%;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    transform: translateY(-50%);
    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
      to {
        opacity: 1;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
    }
    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;
      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .right-heard {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid var(--fold-border-color);
    line-height: 45px;
    box-sizing: border-box;
    font-size: var(--header-fontsize);
    margin: 0 5px 0 5px;
    .right-heard-title {
      .heard-title-color {
        color: var(--fold-word-color);
        font-weight: 600;
      }
    }
  }
  .right-main {
    height: calc(100% - 45px);
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: var(--content-fontsize);
    .base-info-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right-main-title {
        color: var(--fold-word-color);
        display: block;
      }
    }

    .basic {
      padding: 0 20px;
      font-size: var(--content-fontsize);
      .basic-name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .basic-main-title {
          color: #797979;
          font-weight: 600;
        }
        .basic-name-item {
          display: flex;
          align-items: center;
          height: 20px;
          width: 300px;
          :deep(.el-input) {
            width: 180px;
          }
          // line-height: 15px;

          .item-name {
            line-height: 15px;
            color: #797979;
          }

          .basic-name-font {
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
